<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryForm" :inline="true">
        <!-- StartDate  EndDate -->
        <el-form-item prop="month">
          <el-date-picker
            v-model="queryForm.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            :disabled-date="disabledStartDate"
            @change="StartDateChange"
          />
        </el-form-item>
        <el-form-item prop="month">
          <el-date-picker
            v-model="queryForm.endTime"
            type="datetime"
            placeholder="请选择结束时间"
            :disabled-date="disabledEndDate"
            @change="EndDateChange"
          />
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input v-model="queryForm.keywords" placeholder="请输入关键字" clearable style="width: 200px" />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table ref="tableRef" v-loading="loading" :data="tableData" style="width: 100%" :scrollbar-always-on="true">
        <el-table-column align="center" label="应用名称" prop="appName" min-width="160" />
        <el-table-column align="center" label="时间" prop="date" min-width="120" />
        <el-table-column align="center" label="Logger" prop="logger" min-width="120" />
        <el-table-column align="center" label="日志消息" prop="message" min-width="300" />
        <el-table-column label="操作" fixed="right" :width="90">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="openDetail(scope.row)"> 详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryForm.pageNum"
        v-model:limit="queryForm.pageSize"
        @pagination="handleQuery"
      />
    </div>
    <el-dialog v-model="dialogVisible" title="详细信息" width="60vw">
      <div
        style="word-break: break-word; white-space: pre-wrap; max-height: 70vh; overflow-y: scroll"
        v-html="messageHtml"
      ></div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { QueryLog4netInfo } from "@/api/log4netlog/index";
import moment from "moment";
const loading = ref(false);
const tableData = ref();
const dialogVisible = ref(false);
const messageHtml = ref();

const tableRef = ref();

const StartDateChange = (value: any) => {
  queryForm.startTime = moment(value).format("yyyy-MM-DD hh:mm:ss");
  console.log(moment(value).format("yyyy-MM-DD hh:mm:ss"));
};

const EndDateChange = (value: any) => {
  queryForm.endTime = moment(value).format("yyyy-MM-DD hh:mm:ss");
};

/**
 * 禁用开始日期
 */
const disabledStartDate = (time: Date) => {
  return time.getTime() > Date.now();
};
/**
 * 禁用结束日期
 */
const disabledEndDate = (time: Date) => {
  if (queryForm.startTime) {
    return time.getTime() > Date.now() || time.getTime() < moment(queryForm.startTime).toDate().getTime();
  }
  return time.getTime() > Date.now();
};

//查询条件
const queryForm = reactive({
  startTime: "",
  endTime: "",
  keywords: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0);

const openDetail = (row: any) => {
  messageHtml.value = row.message;
  dialogVisible.value = true;
};

//这是列表数据
const handleQuery = function () {
  loading.value = true;
  QueryLog4netInfo(queryForm)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableData.value = res.data.list;
          queryForm.pageNum = res.data.pageNum;
          queryForm.pageSize = res.data.pageSize;
          total.value = res.data.total;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
:deep(.el-button) {
  margin-left: 5px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 5px;
}
:deep(.el-table__cell div) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
